<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parent Page</title>
</head>

<body>
  <h1>Main Page</h1>
  <button id="startRender">开始渲染</button>
  <button id="stopRender">停止渲染</button>
  <iframe id="threeIframe" src="iframe.html" width="800" height="600" frameborder="0"></iframe>

  <script>
    const iframe = document.getElementById("threeIframe");

    // 向 iframe 发送消息
    function sendMessageToIframe(command) {
      iframe.contentWindow.postMessage({ command }, "*");
    }

    // 开始渲染
    document.getElementById("startRender").addEventListener("click", () => {
      sendMessageToIframe("start");
    });

    // 停止渲染
    document.getElementById("stopRender").addEventListener("click", () => {
      sendMessageToIframe("stop");
    });

    {
      /* 
      
      // 清空 iframe 内容
    const iframe = document.getElementById("threeIframe");
    iframe.src = "about:blank";  // 通过设置为空页面来清除 iframe 中的内容
      */
    }

    {
      /*  完全重置，这样就粗暴的直接不用销毁了
      function resetIframe() {
      const iframe = document.getElementById("threeIframe");
      
      // 移除 iframe
      iframe.remove();
      
      // 重新创建并插入 iframe
      const newIframe = document.createElement("iframe");
      newIframe.id = "threeIframe";
      newIframe.src = "iframe.html";
      newIframe.width = "800";
      newIframe.height = "600";
      document.body.appendChild(newIframe);
  }
  
      */
    }
  </script>
</body>

</html>